<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="竹炭">
    <meta name="keywords" content="竹炭，烧烤">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <title>竹炭 | 首页</title>
</head>

<body>
    <header>
        <nav id="navbar">
            <div class="container">
                <h1><a href="index.html">星核碳业</a></h1>
                <ul>
                    <li><a class=" current" href="index.html">首页</a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </div>
        </nav>
        <div id="showcase">
            <div class="container">
                <div class="showcase-contant">
                    <h1>感谢选择<span class="text-primary">星核碳业</span></h1>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro quo aut, ipsam, itaque, maxime minus natus magni rem nihil ipsa iste enim quidem sunt. Tempora qui perferendis ad dolorum nemo?</p>
                    <a class="btn" href="about.html">关于我们</a>
                </div>
            </div>
        </div>
    </header>
    <!-- 第一个产品介绍 -->
    <section id="home-info" class="bg-dark">
        <div class="info-img"></div>
        <div class="info-content">
            <h2><span class="text-primary">星核碳业</span>介绍</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere ratione quia, natus nemo cumque voluptates odio, minima rerum ipsum incidunt dolorum excepturi voluptate dicta nam. Ea accusamus accusantium provident molestiae?</p>
            <a class="btn btn-light" href="about.html">阅读更多</a>
        </div>
    </section>
    <!-- 第二个产品介绍 -->
    <section id="home-info" class="bg-dark">
        <div class="info-img" style="float: right;background: url(img/03index-homeinfo-bg.jpg) no-repeat center center/cover;"></div>
        <div class="info-content" style="float: left;">
            <h2><span class="text-primary">星核碳业</span>介绍</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere ratione quia, natus nemo cumque voluptates odio, minima rerum ipsum incidunt dolorum excepturi voluptate dicta nam. Ea accusamus accusantium provident molestiae?</p>
            <a class="btn btn-light" href="about.html">阅读更多</a>
        </div>
    </section>
    <!-- 第三个产品介绍 -->
    <section id="home-info" class="bg-dark">
        <div class="info-img" style="background: url(img/04index-homeinfo-bg.jpg) no-repeat center center/cover;"></div>
        <div class="info-content">
            <h2><span class="text-primary">星核碳业</span>介绍</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere ratione quia, natus nemo cumque voluptates odio, minima rerum ipsum incidunt dolorum excepturi voluptate dicta nam. Ea accusamus accusantium provident molestiae?</p>
            <a class="btn btn-light" href="about.html">阅读更多</a>
        </div>
    </section>
    <!-- 第四个产品介绍 -->
    <section id="home-info" class="bg-dark">
        <div class="info-img" style="float: right;"></div>
        <div class="info-content" style="float: left;">
            <h2><span class="text-primary">星核碳业</span>介绍</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere ratione quia, natus nemo cumque voluptates odio, minima rerum ipsum incidunt dolorum excepturi voluptate dicta nam. Ea accusamus accusantium provident molestiae?</p>
            <a class="btn btn-light" href="about.html">阅读更多</a>
        </div>
    </section>

    <!-- 底部介绍 -->
    <section id="features">
        <div class="box bg-light">
            <i class="fa fa-cubes fa-3x"></i>
            <h3>产品简介</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, asperiores?</p>
        </div>
        <div class="box bg-parimary">
            <i class="fa fa-building fa-3x"></i>
            <h3>公司介绍</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, asperiores?</p>
        </div>
        <div class="box bg-light">
            <i class="fa fa-phone fa-3x"></i>
            <h3>联系我们</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, asperiores?</p>
        </div>
    </section>
    <div class="clr"></div>
    <footer id="main-footer">
        <p>星核碳业 &copy; 2021,All Rights Reserved</p>
    </footer>
</body>

</html>
